<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">茅台编码识别:{{form.qrcode}}</text>
		</uni-card>

		<form @submit="onSubmit">
			<uni-section v-if="!view" title="最多选择9张图片" type="line">
				<uni-file-picker limit="9" v-model="form.images" @select="uploadImg" @delete="delimg"
					file-mediatype="image"></uni-file-picker>
			</uni-section>
			<uni-section v-if="view" title="图片" type="line">
				<image v-for="(item, index) in form.images" :key="index" :src="item"></image>
			</uni-section>
			<uni-section title="品类" type="line">
				<uni-data-select v-model="form.category" :localdata="category" text></uni-data-select>
			</uni-section>
			<uni-section title="收入价" type="line">
				<!-- <input class="inputt" type="number" placeholder="收入价" /> -->
				<uni-easyinput type="number" v-model="form.reclaimPrice" trim="all" placeholder="收入价"></uni-easyinput>
			</uni-section>
			<uni-section title="备注" type="line">
				<uni-easyinput trim="all" v-model="form.remark" placeholder="备注"></uni-easyinput>
			</uni-section>
			<view class="button-sp-area" style="margin-top: 3%;">
				<button v-if="!view" form-type="submit" class="mini-btn" type="primary">保存</button>
				<button class="mini-btn" @click="back" type="default" style="margin-top: 1%;">返回</button>

			</view>

		</form>
	</view>
</template>

<script>
	import {
		getMaoTaiCategory,
		uploadImg,
		saveMaoTaInfo,
		listMaoTaInfo
	} from '@/utils/api.js'

	import BASE_URL from '@/utils/env.js'

	export default {
		onLoad(options) {
			if (options.view == true) {
				this.view = false
			}
			if (options.view == undefined) {
				this.view = false
			}

			this.form.qrcode = options.qrcode
			this.listRequest.qrcode = this.form.qrcode
			this.load()

		},
		methods: {
			async onSubmit(form) {
				if (this.form.reclaimPrice == null || this.form.reclaimPrice == 0) {
					uni.showToast({
						title: '收入价不能为0!',
						icon: 'error',
						duration: 2000
					});
					return
				}
				this.form.images = this.tmpImages
				let res = await saveMaoTaInfo(JSON.stringify(this.form))
				if (res.code == 0) {
					uni.navigateTo({
						url: '/pages/index/index?savemaitai=1'
					});;

				} else {
					uni.showToast({
						title: res.message,
						icon: 'error',
						duration: 2000
					});
				}
			},
			delimg(img) {
				this.tmpImages.splice(img.index, 1)
			},
			async uploadImg(e) {
				let imgpaths = e.tempFilePaths;
				for (let i = 0; i < imgpaths.length; i++) {
					let res = await uploadImg(imgpaths[i])
					let resJson = JSON.parse(res)
					this.tmpImages.push(resJson.data)
					console.log('上传成功')
				}
				// imgpaths.forEach(img=>{
				// 	let res = await uploadImg(img)
				// 	let resJson = JSON.parse(res)
				// 	this.form.images.push(resJson.data)
				// 	console.log(this.images)
				// })
			},
			async load() {
				let res = await getMaoTaiCategory()
				res.data.forEach(item => {
					this.category.push({
						text: item.categoryName,
						value: item.categoryName
					})
				})

				if (this.view) {
					let res = await listMaoTaInfo(this.listRequest)
					let info = res.data.records[0]
					this.form.category = info.category
					this.form.reclaimPrice = info.reclaimPrice
					this.form.remark = info.remark

					info.images.split(',').forEach(imgId => {

						// this.imgObj.url = BASE_URL + '/file/image/' + imgId
						// this.imgObj.name = imgId
						// this.imgObj.extname = 'png'
						this.form.images.push(BASE_URL + '/file/image/' + imgId)
					})
					console.log(this.form.images)
				}
			},
			back() {
				if (this.view) {
					uni.navigateBack(1);
				} else {
					uni.navigateBack('/index/index');
				}

			}
		},
		data() {
			return {
				category: [],
				tmpImages: [],

				form: {
					qrcode: '-',
					images: [],
					category: '',
					reclaimPrice: undefined,
					remark: ''
				},
				listRequest: {
					page: 1,
					pageSize: 12,
					qrcode: ''
				},
				view: true
			}
		}
	}
</script>

<style lang="scss">
	.inputt {
		margin-left: 3%;
		margin-right: 3%;
	}

	.image {
		width: 80px;
		height: 80px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
</style>